<template>
  <view class="swiper">
    <view class="topSearch">
      <view class="text1">热搜</view>
        <view class="text2">
          <button class="btn">原神上了ps4</button>
        </view>
      </view>
    <swiper class="headSwiper" indicator-active-color="#66CCFF" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
      <swiper-item class="swiperItem"><img class="img" src="../../static/images/debate.png"></swiper-item>
      <swiper-item class="swiperItem"><img class="img" src="../../static/images/debate1.png"></swiper-item>
      <swiper-item class="swiperItem"><img class="img" src="../../static/images/debate2.png"></swiper-item>
    </swiper>
  </view>
</template>
rwe
<script>
  export default {
    name: 'HomeSwiper',
    data () {
      return {
        swiperOption: {}
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .swiper
    position: absolute;
    width 700rpx
    height 200rpx
    margin-top 90rpx
    margin-left 27rpx
    border-radius .1rem
    .topSearch
      display flex
      flex-direction row
      height 34rpx
      font-size 20rpx
      color: #fff
      line-height 20rpx
      .text1
        margin-top 6rpx
        margin-right 20rpx
      .text2
        .btn
          background-color #C9C9C9
          color white
          opacity: 0.8
          line-height 100%
          width atuo
          font-size 20rpx
          line-height 30rpx
          border-radius .3rem
    .headSwiper
      height 220rpx
      border-radius .11rem
    .swiperItem
      border-radius .11rem
    .img
      height 250rpx
      width 700rpx
      mode aspectFill
      border-radius .11rem


</style>
